<script setup lang="ts">
import WrapComponent from '../WrapComponent.vue'
import TableHead from '../TableHead.vue'
import ReportPerson from '../ReportPerson.vue'
import { getFlatternColumns } from '../util'
import type { EnergyDataReportList, ReportColumnsItem } from '../../types'

import useInformant from '../useInformant'
import { uuid } from '@/utils'

const props = defineProps<{
  dataTime: string
  readonly?: boolean
}>()
const title = ref('能源计量器具配备情况统计汇总表')
const columns: ReportColumnsItem[] = [
  { label: '分级、分项', prop: 'gradeType' },
  { label: '级或项的名称', prop: 'gradeName' },
  {
    label: '配备的计量器具类别及数量',
    prop: 'C',
    children: [
      {
        label: '衡器',
        prop: 'CA',
        children: [
          { label: '应配数量（台）', prop: 'CAA' },
          { label: '实配数量（台）', prop: 'CAB' },
        ],
      },
      {
        label: '电能表',
        prop: 'CB',
        children: [
          { label: '应配数量（台）', prop: 'CBA' },
          { label: '实配数量（台）', prop: 'CBB' },
        ],
      },
      {
        label: '油流量表（装置）',
        prop: 'CC',
        children: [
          { label: '应配数量（台）', prop: 'CCA' },
          { label: '实配数量（台）', prop: 'CCB' },
        ],
      },
      {
        label: '气体流量表（装置）',
        prop: 'CD',
        children: [
          { label: '应配数量（台）', prop: 'CDA' },
          { label: '实配数量（台）', prop: 'CDB' },
        ],
      },
      {
        label: '水流量表（装置）',
        prop: 'CE',
        children: [
          { label: '应配数量（台）', prop: 'CEA' },
          { label: '实配数量（台）', prop: 'CEB' },
        ],
      },
      {
        label: '温度仪表',
        prop: 'CF',
        children: [
          { label: '应配数量（台）', prop: 'CFA' },
          { label: '实配数量（台）', prop: 'CFB' },
        ],
      },
      {
        label: '压力仪表',
        prop: 'CG',
        children: [
          { label: '应配数量（台）', prop: 'CGA' },
          { label: '实配数量（台）', prop: 'CGB' },
        ],
      },
    ],
  },
]
const columns1: ReportColumnsItem[] = [
  { label: '能源种类及能源名称', prop: 'A', width: 140 },
  {
    label: '能源计量分级、分项',
    prop: 'B',
    children: [
      {
        label: '进出用能单位',
        prop: 'BA',
        children: [
          { label: '应配数量（台）', prop: 'BAA' },
          { label: '实配数量（台）', prop: 'BAB' },
          { label: '实际配备率（%）', prop: 'BAC' },
        ],
      },
      {
        label: '进出主要次级用能单位',
        prop: 'BB',
        children: [
          { label: '应配数量（台）', prop: 'BBA' },
          { label: '实配数量（台）', prop: 'BBB' },
          { label: '实际配备率（%）', prop: 'BBC' },
        ],
      },
      {
        label: '主要用能设备',
        prop: 'BC',
        children: [
          { label: '应配数量（台）', prop: 'BCA' },
          { label: '实配数量（台）', prop: 'BCB' },
          { label: '实际配备率（%）', prop: 'BCC' },
        ],
      },
      {
        label: '其他项目',
        prop: 'BD',
        children: [
          { label: '应配数量（台）', prop: 'BDA' },
          { label: '实配数量（台）', prop: 'BDB' },
          { label: '实际配备率（%）', prop: 'BDC' },
        ],
      },
    ],
  },
]

/** 除分级、分项列外的数据列 */
const flatternColumns = getFlatternColumns(columns.slice(1))

const flatternColumns1 = getFlatternColumns(columns1)

/** 配备的计量器具类别及数量 数据列 */
const cols = columns[columns.length - 1]!.children!
const flatternCols = getFlatternColumns(cols)

/** 进出用能单位 */
const lists1 = ref<EnergyDataReportList[]>([
  ...Array(1).fill(1).map(() => ({
    uuid: uuid(),
    data: [
      ...flatternColumns.map((v: any) => ({
        key: v.prop,
        value: '',
        editable: !props.readonly,
      })),
    ],
  })),
])
/** 进出主要次级用能单位 */
const lists2 = ref<EnergyDataReportList[]>([
  ...Array(2).fill(1).map(() => ({
    uuid: uuid(),
    data: [
      ...flatternColumns.map(v => ({
        key: v.prop,
        value: '',
        editable: !props.readonly,
      })),
    ],
  })),
])
const lists2summary = computed(() => {
  return {
    uuid: uuid(),
    data: [
      ...flatternCols.map(v => ({
        key: v.prop,
        value: '',
        editable: false,
        calculable: true,
      })),
    ],
  }
})

/** 主要用能设备 */
const lists3 = ref<EnergyDataReportList[]>([
  ...Array(2).fill(1).map(() => ({
    uuid: uuid(),
    data: [
      ...flatternColumns.map(v => ({
        key: v.prop,
        value: '',
        editable: !props.readonly,
      })),
    ],
  })),
])
const lists3summary = computed(() => {
  return {
    uuid: uuid(),
    data: [
      ...flatternCols.map(v => ({
        key: v.prop,
        value: '',
        editable: false,
        calculable: true,
      })),
    ],
  }
})

/** 其他项目 */
const lists4 = ref<EnergyDataReportList[]>([
  ...Array(4).fill(1).map(() => ({
    uuid: uuid(),
    data: [
      ...flatternColumns.map(v => ({
        key: v.prop,
        value: '',
        editable: !props.readonly,
      })),
    ],
  })),
])

const summary1 = computed(() => {
  return {
    uuid: uuid(),
    data: [
      ...flatternCols.map(v => ({
        key: v.prop,
        value: '',
        editable: false,
        calculable: true,
      })),
    ],
  }
})

/** 续表数据列 */
const lists5 = ref<EnergyDataReportList[]>([
  ...Array(10).fill(1).map(() => ({
    uuid: uuid(),
    data: [
      ...flatternColumns1.map(v => ({
        key: v.prop,
        value: '',
        editable: !props.readonly,
      })),
    ],
  })),
])
const summary2 = computed(() => {
  return {
    uuid: uuid(),
    data: [
      ...flatternColumns1.slice(1).map(v => ({
        key: v.prop,
        value: '',
        editable: false,
        calculable: true,
      })),
    ],
  }
})

const { informant } = useInformant()

async function clickHandler(evt: Event, index?: number) {
  console.log(evt, index)
}
function onContextmenu() {}
</script>

<template>
  <WrapComponent>
    <template v-if="$slots.title" #title>
      <slot name="title" :title="title" :save-stage="() => {}" />
    </template>
    <div class="width-fill height-fill flex-direction flex">
      <div>
        <div class="report-table-head">
          <table class="report-table">
            <TableHead :columns="columns" :show-line-number="false" />
          </table>
        </div>
        <table class="report-table" style="height: auto;">
          <tbody ref="tbody">
            <tr v-for="(item, i) in lists1" :key="item.uuid">
              <td v-if="i === 0" :rowspan="lists1.length">
                <div class="span-cell">
                  进出用能单位
                </div>
              </td>
              <td v-for="(d, index) in item.data" :key="`${item.uuid}_${index}`">
                <div v-if="!d.editable" class="span-cell">
                  {{ d.value }}
                </div>
                <div v-else class="input-cell">
                  <input v-model="d.value" type="text" @click="clickHandler($event, i)" @contextmenu="onContextmenu">
                </div>
              </td>
            </tr>
            <tr v-for="(item, i) in lists2" :key="item.uuid">
              <td v-if="i === 0" :rowspan="lists2.length + 1">
                <div class="span-cell">
                  进出主要次级用能单位
                </div>
              </td>
              <td v-for="(d, index) in item.data" :key="`${item.uuid}_${index}`">
                <div v-if="!d.editable" class="span-cell">
                  {{ d.value }}
                </div>
                <div v-else class="input-cell">
                  <input v-model="d.value" type="text" @click="clickHandler($event, i)" @contextmenu="onContextmenu">
                </div>
              </td>
            </tr>
            <tr>
              <td class="is-calculable">
                <div class="span-cell">
                  合计
                </div>
              </td>
              <td v-for="(s, sindex) in lists2summary.data" :key="sindex" class="is-calculable">
                <div class="span-cell">
                  {{ s.value }}
                </div>
              </td>
            </tr>
            <tr v-for="(item, i) in lists3" :key="item.uuid">
              <td v-if="i === 0" :rowspan="lists3.length + 1">
                <div class="span-cell">
                  主要用能设备
                </div>
              </td>
              <td v-for="(d, index) in item.data" :key="`${item.uuid}_${index}`">
                <div v-if="!d.editable" class="span-cell">
                  {{ d.value }}
                </div>
                <div v-else class="input-cell">
                  <input v-model="d.value" type="text" @click="clickHandler($event, i)" @contextmenu="onContextmenu">
                </div>
              </td>
            </tr>
            <tr>
              <td class="is-calculable">
                <div class="span-cell">
                  合计
                </div>
              </td>
              <td v-for="(s, sindex) in lists3summary.data" :key="sindex" class="is-calculable">
                <div class="span-cell">
                  {{ s.value }}
                </div>
              </td>
            </tr>
            <tr v-for="(item, i) in lists4" :key="item.uuid">
              <td v-if="i === 0" :rowspan="lists4.length">
                <div class="span-cell">
                  其他项目
                </div>
              </td>
              <td v-for="(d, index) in item.data" :key="`${item.uuid}_${index}`">
                <div v-if="!d.editable" class="span-cell">
                  {{ d.value }}
                </div>
                <div v-else class="input-cell">
                  <input v-model="d.value" type="text" @click="clickHandler($event, i)" @contextmenu="onContextmenu">
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2" class="is-calculable">
                <div class="span-cell">
                  合计
                </div>
              </td>
              <td v-for="(s, sindex) in summary1.data" :key="sindex" class="is-calculable">
                <div class="span-cell">
                  {{ s.value }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="description-text">
          <p>
            注：其他项目包括：可回收利用余能、能源计量标准、自检自查、能源能量分析等项目。
          </p>
        </div>
      </div>
      <ElDivider />
      <div>
        <div class="report-table-head">
          <table class="report-table">
            <TableHead :columns="columns1" :show-line-number="false" />
          </table>
        </div>
        <table class="report-table" style="height: auto;">
          <tbody ref="tbody">
            <tr v-for="(item, i) in lists5" :key="item.uuid">
              <td
                v-for="(d, index) in item.data" :key="`${item.uuid}_${index}`"
                :style="index === 0 ? 'width: 150px;' : ''"
              >
                <div v-if="!d.editable" class="span-cell">
                  {{ d.value }}
                </div>
                <div v-else class="input-cell">
                  <input v-model="d.value" type="text" @click="clickHandler($event, i)" @contextmenu="onContextmenu">
                </div>
              </td>
            </tr>
            <tr>
              <td class="is-calculable" style="width: 150px;">
                <div class="span-cell">
                  合计
                </div>
              </td>
              <td v-for="(s, sindex) in summary2.data" :key="sindex" class="is-calculable">
                <div class="span-cell">
                  {{ s.value }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="description-text">
          <p>
            注：其他项目包括：可回收利用余能、能源计量标准、自检自查、能源能量分析等项目。
          </p>
        </div>
      </div>
      <ReportPerson v-model="informant" :readonly="readonly" />
    </div>
  </WrapComponent>
</template>
